
<style>
    .layui-input{width: 100px; height: 30px; padding:0 10px;}
    .input-group-addon{background-color:#fff; width: 33px; height: 30px;border-radius: 0; }
    .date_type,.role_type,.port_date_type{height: 30px; padding: 0 3px;}
</style>

<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">会员增长情况</h3>
        <div class="box-tools pull-right">

            {{--<div id="type0" class="btn-group pull-right" style="margin-right: 10px">
                <div class="input-group input-group-sm">
                    <div class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </div>
                    <input class="form-control" placeholder="自定义时间" id="month" name="month" value="">
                </div>
            </div>--}}

            {{--<div id="type1" class="btn-group pull-right" style="margin-right: 10px;display: none;">
                <div class="input-group input-group-sm">
                    <div class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </div>
                    <input class="form-control" placeholder="自定义时间" id="year" name="year" value="">
                </div>
            </div>--}}

            <div id="type0" class="btn-group pull-right" style="margin-right: 10px">
                <input type="text" class="layui-input pull-right" id="month" placeholder="自定义时间" >
                <div class="input-group-addon pull-right" style="border: 1px solid #ccc;border-right: 0;">
                    <i class="fa fa-calendar"></i>
                </div>
            </div>

            <div id="type1" class="btn-group pull-right" style="margin-right: 10px;display: none;">
                <input type="text" class="layui-input pull-right" id="year" placeholder="自定义时间" >
                <div class="input-group-addon pull-right" style="border: 1px solid #ccc;border-right: 0;">
                    <i class="fa fa-calendar"></i>
                </div>
            </div>

            <div class="btn-group pull-right" style="margin-right: 10px">
                <select class="form-control date_type" style="width: 100%;">
                    <option value="0">按月统计</option>
                    <option value="1">按年统计</option>
                </select>
            </div>
            <div class="btn-group pull-right" style="margin-right: 10px">
                <select class="form-control role_type" style="width: 100%;">
                    <option value="0">全部</option>
                    <option value="1">老师端</option>
                    <option value="2">家长端</option>
                </select>
            </div>
            <div class="btn-group pull-right" style="margin-right: 10px">
                <a href="javascript:;" class="btn btn-sm btn-default" title="导出数据">
                    <span class="hidden-xs">导出数据</span>
                </a>
            </div>
        </div>
    </div>
    <div class="box-body" style="display: block;">
        <div id="main" style="width: 80%;height:400px; margin-left: 10%; text-align: center;"></div>
    </div>
</div>

<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">会员端口来源</h3>
        <div class="box-tools pull-right">
            <div id="port_type0" class="btn-group pull-right" style="margin-right: 10px">
                <input type="text" class="layui-input pull-right" id="port_month" placeholder="自定义时间" >
                <div class="input-group-addon pull-right" style="border: 1px solid #ccc;border-right: 0;">
                    <i class="fa fa-calendar"></i>
                </div>
            </div>
            <div id="port_type1" class="btn-group pull-right" style="margin-right: 10px;display: none;">
                <input type="text" class="layui-input pull-right" id="port_year" placeholder="自定义时间" >
                <div class="input-group-addon pull-right" style="border: 1px solid #ccc;border-right: 0;">
                    <i class="fa fa-calendar"></i>
                </div>
            </div>
            <div class="btn-group pull-right" style="margin-right: 10px">
                <select class="form-control port_date_type" style="width: 100%;">
                    <option value="0">按月统计</option>
                    <option value="1">按年统计</option>
                </select>
            </div>
            <div class="btn-group pull-right" style="margin-right: 10px">
                <a href="javascript:;" class="btn btn-sm btn-default" title="导出数据">
                    <span class="hidden-xs">导出数据</span>
                </a>
            </div>
        </div>
    </div>
    <div class="box-body" style="display: block;">
        <div id="main" style="width: 80%;height:400px; margin-left: 10%; text-align: center;"></div>
    </div>
</div>

<script>

    $(function () {

        /*会员增长情况*/
        var month = '',year = '';
        laydate.render({
            elem: '#month',
            type: 'month',
            done: function(value){
                month = value;
                initCharts();
            }
        });
        laydate.render({
            elem: '#year',
            type: 'year',
            done: function(value){
                year = value;
                initCharts();
            }
        });
        var date_type = '0';
        var role_type = '0';
        $('.date_type').change(function () {
            date_type = $(this).val();
            if (date_type === '0'){
                $('#type1').css('display','none');
                $('#type0').css('display','block');
            } else {
                $('#type0').css('display','none');
                $('#type1').css('display','block');
            }
        });
        $('.role_type').change(function () {
            role_type = $(this).val();
            initCharts();
        });
        var myChart = echarts.init(document.getElementById('main'));
        function initCharts(){
            myChart.showLoading();
            $.get('/api/getUserRegister',{'date_type':date_type,'role_type':role_type,'year':year,'month':month}).done(function (data) {
                myChart.hideLoading();
                console.log(data.data)
                if (data.data){
                    option = {
                        xAxis: {
                            type: 'category',
                            data: data.data.date
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: data.data.count,
                            type: 'line',
                            smooth: true,
                            itemStyle : { normal: {label : {show: true}}}
                        }]
                    };

                    myChart.setOption(option);
                }

            });
        }


        /*会员端口来源*/
        var port_month = '',port_year = '';
        laydate.render({
            elem: '#port_month',
            type: 'month',
            done: function(value){
                port_month = value;
                initPortCharts();
            }
        });
        laydate.render({
            elem: '#port_year',
            type: 'year',
            done: function(value){
                port_year = value;
                initPortCharts();
            }
        });
        var port_date_type = '0';
        $('.port_date_type').change(function () {
            port_date_type = $(this).val();
            if (port_date_type === '0'){
                $('#port_type1').css('display','none');
                $('#port_type0').css('display','block');
            } else {
                $('#port_type0').css('display','none');
                $('#port_type1').css('display','block');
            }
        });
        function initPortCharts() {
            
        }

    });


</script>